<template>
	<el-dialog title="图片裁剪" :visible="pickImg.cropperImg" width="650px" :before-close="handleCancel">
		<div class="cropper-container">
			<vueCropper ref="cropper" :img="imgUrl" :outputSize="1" :outputType="option.outputType" :info="true" :full="option.full"
			 :canMove="option.canMove" :canMoveBox="option.canMoveBox" :original="option.original" :autoCrop="option.autoCrop"
			 :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight" :fixedBox="option.fixedBox" @realTime="realTime"></vueCropper>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button @click="handleCancel">取 消</el-button>
			<el-button type="primary" @click.stop="handleConfirm">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
// 	import {
// 		VueCropper
// 	} from 'vue-cropper'
	
	import VueCropper from '../vue-cropper/vue-cropper.vue'
	export default ({
		name: 'CropperImg',
		computed: {
			pickImg() {
				return this.$store.getters.pickImg
			},
			imgUrl() {
				return this.$store.getters.cropperImgUrl
			}
		},
		data() {
			return {
				previews: {},
				option: {
					outputSize: 1, //剪切后的图片质量（0.1-1）
					full: false, //输出原图比例截图 props名full
					outputType: 'png',
					canMove: true,
					original: false,
					canMoveBox: true,
					autoCrop: true,
					autoCropWidth: 200,
					autoCropHeight: 150,
					fixedBox: false
				}
			}
		},
		methods: {
			//放大/缩小
			changeScale(num) {
				num = num || 1;
				this.$refs.cropper.changeScale(num);
			},
			//左旋转
			rotateLeft() {
				this.$refs.cropper.rotateLeft();
			},
			//右旋转
			rotateRight() {
				this.$refs.cropper.rotateRight();
			},
			// 实时预览函数 
			realTime(data) {
				this.previews = data
			},
			//下载图片
			down() {
				this.$refs.cropper.getCropData((data) => {
					this.pickImg && this.pickImg.callback && this.pickImg.callback(data)
				})
			},
			handleCancel() {
				this.$store.commit('SET_PICK_IMG', false)
			},
			handleConfirm() {
				this.down()
				this.handleCancel()
			}
		},
		components: {
			VueCropper,
		}
	})
</script>

<style>
	.cropper-container {
		width: 606px;
		height: 350px;
	}
</style>
